<template>
    <div class="setFond">
        <div class="header">
            <div @click="$router.go(-1)"><img src="../../assets/image/assets-center/left-arrow.png" alt=""
                    class="w-14 h-27" /></div>
            <!-- <div class="textColor" @click="$router.push('/identity')">{{ $t('跳过') }}</div> -->
        </div>
        <div class="content">
            <div class="title textColor">{{ $t('设置资金密码') }}</div>
            <ExInput :label="$t('密码')" :placeholderText="$t('资金密码(6位数字)')" v-model="password" typeText="password" />
            <ExInput :label="$t('确认密码')" :placeholderText="$t('请确认密码')" v-model="repassword" typeText="password" />
            <div class="btn btnMain" @click="submit">{{ $t('确定') }}</div>
        </div>
    </div>
</template>

<script>
import ExInput from "@/components/ex-input";
import Axios from "@/API/userCenter.js";
export default {
    props: {

    },
    components: {
        ExInput
    },
    data() {
        return {
            password: '',
            repassword:''
        }
    },
    methods: {
        setSafewordReg() {
            Axios.setSafewordReg({
                safeword: this.repassword
            }).then((res) => {
                this.$toast(this.$t('绑定成功'));
                this.$router.push('/identity')
            }).catch((error) => {
                if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}    
            });
        },
        submit(){
            if (this.password.length < 6 || this.repassword.length<6){
                this.$toast(this.$t('资金密码(6位数字)'))
                return false
            }
            if (this.password !== this.repassword){
                this.$toast(this.$t('密码不一致'))
                return false
            }
            this.setSafewordReg()
        }
    }
}
</script>

<style lang="scss" scoped>

.setFond {
    width: 100%;
    box-sizing: border-box;
    font-size: 26px;
    padding: 0 32px;
}

.header {
    display: flex;
    justify-content: space-between;
    padding: 0 26px;
    font-size: 28px;
    height: 100px;
    line-height: 100px;
}

.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 50px;
    margin-bottom: 60px;
}

.btn {
    color: #000;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    border-radius: 10px;
}
</style>